<template>
    <div class="login">
        <div class="container">
            <van-form ref="regForm" @submit="onSubmit" validate-trigger="onChange" validate-first>
                <van-cell-group inset>
                    <van-field v-model="tel" type="tel" name="tel" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }, { validator: validateTel }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
            <!-- <button @click="UserStore.exitAndUpdateUserInfo">
                退出登录
            </button> -->
        </div>
    </div>
</template>

<script setup lang="ts">
//  从声明文件中 引入 对应的类型
import type { Ref } from "vue"
import type { FormInstance } from 'vant';
import type { RouteLocationRaw } from 'vue-router';

import { ref } from 'vue';
import { doCheckPhoneAPI } from "@/api/user"
import { useRoute, useRouter } from "vue-router";

import { useUserStore } from "@/stores/user";

// vantui中的函数组件 => 手动引入
import { showToast } from 'vant';

const UserStore = useUserStore();


const tel: Ref = ref<string>('');
const password: Ref = ref<string>('');
const regForm = ref<FormInstance>();


const route = useRoute();
const router = useRouter();

const validateTel = async (tel: number): Promise<any> => {
    console.log("tel", tel);
    try {
        let res = await doCheckPhoneAPI({ tel: tel })  // 验证手机号是否存在  200 => 不存在   !200 => 不存在
        return "该手机号未注册";   // 
    } catch (err: any) {
        return true;  // 
    }
}


// 全都验证成功才执行  =>
const onSubmit = async (values: any): Promise<any> => {
    console.log('submit', values); // 三个值 {tel,password,code}
    try {
        // 先登录
        // let res = await doUserLoginAPI({
        //     loginname: tel.value,  // tel => ref对象
        //     password: password.value
        // })
        // console.log("登录成功", res);

        // 登录成功之后在存储token userid

        // 登录 => 异步代码
        UserStore.LoginAndUpdateUserInfo({
            loginname: tel.value,  // tel => ref对象
            password: password.value
        }).then(() => {

            // 登录成功 再 跳转  
            let { ReturnUrl } = route.query;
            if (ReturnUrl) {
                router.replace(ReturnUrl as RouteLocationRaw)
            } else {
                router.push("/home");
            }
        })



        // 跳转 => 同步代码   => 先跳转(此时可能还未登录成功)
        // let { ReturnUrl } = route.query;
        // if (ReturnUrl) {
        //     router.replace(ReturnUrl as RouteLocationRaw)
        // } else {
        //     router.push("/home");
        // }



    } catch (err: any) {
        showToast(err.message);
        return false;  // 验证失败 => 返回false|字符串(错误提示)
    }

};
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-color: #f7f8fa;
    overflow: hidden;
}

.container {
    width: 90%;
    margin: 0 auto;
    margin-top: 1rem;


}

.sendCodeBtn {
    width: 1.64rem;
}
</style>